<style lang="scss" scoped>
h1 {
    background-color: rgb(51, 114, 250);
    color: #fff;
    margin: 10px 75px;
    padding: 5px;
    border-radius: 20px;
    line-height: 30px;
    text-align: center;
}

.videos{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    video{
        width: 50%;
    }
}

footer {
    width: 94%;
    margin: 10px;
    padding: 20px;
    height: 220px;
    background-color: rgba(105, 64, 186, 0.916);
    border-radius: 8px;
  
    
    .center {
        width: 92%;
        height: 120px;
        background-color: rgb(125, 82, 181);
        margin: 10px;
        padding: 10px;
        text-align: center;

        img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin: 20px;
            background-color: #fff;
            text-align: center;
        }
    }
}
</style>

<template>
    <div>
        <van-nav-bar left-arrow title="直播" @click-left="$router.go(-1)" />
        <van-tabs scrollspy sticky>
            <van-tab title="热播回放">
                <h1>热播回放</h1>
                <video @play="startPlaying($event.target as HTMLAudioElement)" v-for="(item, index) in liveData" :key="index" :src="item.vodiusrc"
                    style="width:  50%;height:300px;" controls>
                </video>
            </van-tab>
            <van-tab v-for="(item, index) in liveData" :key="index" :title="item.vodiustate">
                <h1>{{ item.vodiustate }}</h1>
                <div class="videos">
                    <video :src="item.vodiusrc" controls>
                    </video>
                </div>

            </van-tab>
        </van-tabs>
        <footer>
            <h2 style="color: #fff; line-height: 30px;text-align: center;">• 健康直播 • 专业领先 • 合作共赢 </h2>
            <div class="center">
                <p>
                    <img src="../../assets/金牌.png" alt="">
                    <img src="../../assets/咨询医生.png" alt="">
                    <img src="../../assets/主播.png" alt="">
                </p>
                <p style="color: #fff;font-size: 16px;line-height: 20px;margin-bottom: 3px;">金牌医生 + 专业药师 + 网红主播</p>

            </div>
            <p style="color: #fff; margin-left: 10px;font-size: 14px;">渠道合作： 何经理 18619287714</p>
        </footer>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { useVideoPlayer } from '@/hooks/useVideoPlayer';
const liveData = ref<any[]>([])
const vidouState = ref('')

const getList = async () => {
    const res = await axios.get('/api/review/vidou', { params: { state: vidouState.value } })
    liveData.value = res.data.data
    console.log(res);

}
// 控制视频不能同时播放
const {startPlaying}=useVideoPlayer()

getList()

</script>
